<template>
  <h1>App</h1>
  <button @click="show = !show">ToggleHome</button>

  <Home v-if="show" />

  <About />

  <hr />

  <Suspense>
    <template #default>
      <Dashboard />
    </template>

    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script>
// 静态导入，导入所有模块都会被构建打包到主JS中
// import Home from "./components/Home.vue";

import { defineAsyncComponent } from "vue";
import About from "./components/About.vue";
import Loading from "./components/Loading.vue";
import Error from "./components/Error.vue";
import Dashboard from "./components/Dashboard.vue";

export default {
  components: {
    Dashboard,

    Home: defineAsyncComponent({
      loader: () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            reject("加载失败");
          }, 4000);
        });
      },

      loadingComponent: Loading, // 加载中显示的组件
      delay: 1000, // 显示加载中组件时的一个延迟。默认为 200 ms
      errorComponent: Error, // 加载失败显示的组件
      timeout: 2000, // 加载时间超时设置
    }),
    About,
  },

  data() {
    return {
      show: false,
    };
  },
};
</script>

<style></style>
